<template>
  <Category :scence="sence"></Category>
  <el-card style="margin: 10px 0px">
    <template v-if="sence == Scence.read">
      <el-button
        @click="addSpu"
        style="margin: 10px 0"
        :disabled="!attrStore.category3Value"
        type="primary"
        icon="Plus"
        v-has="'btn.Spu.add'"
      >
        添加商品spu
      </el-button>
      <el-table border :data="data?.records">
        <el-table-column
          label="序号"
          type="index"
          width="120"
        ></el-table-column>
        <el-table-column label="SPU名称" prop="spuName"></el-table-column>

        <el-table-column label="SPU描述" prop="description"></el-table-column>

        <el-table-column label="操作">
          <template #="{ row, index }">
            <el-button
              @click="addSku(row)"
              size="small"
              circle
              icon="Plus"
            ></el-button>

            <el-button
              size="small"
              circle
              type="primary"
              icon="Edit"
              title="编辑"
              @click="changeSence(Scence.writeSpu, row)"
            ></el-button>

            <el-button
              @click="viewSku(row)"
              size="small"
              circle
              type="info"
              icon="View"
            ></el-button>
            <el-popconfirm @confirm="deleteSpu(row)" title="确定删除该spu吗?">
              <template #reference>
                <el-button
                  size="small"
                  circle
                  type="danger"
                  icon="Delete"
                ></el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        style="margin: 10px 0"
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[3, 6, 9, 12]"
        :size="'default'"
        :background="true"
        layout="prev, pager, next, jumper,->,total, sizes"
        :total="total"
        @current-change="getSpuData"
        @size-change="getSpuData"
      />
    </template>
    <spuForm
      ref="spuFormComponent"
      @changeSence="changeSence($event)"
      v-if="sence == Scence.writeSpu"
    ></spuForm>
    <SkuForm
      ref="skuComponent"
      @changeSence="changeSence($event)"
      v-if="sence == Scence.write"
    ></SkuForm>
  </el-card>
  <el-dialog title="sku" v-model="isShow">
    <el-table :data="skuArr">
      <el-table-column label="sku名字" prop="skuName"></el-table-column>
      <el-table-column label="价格" prop="price"></el-table-column>
      <el-table-column label="重量" prop="weight"></el-table-column>
      <el-table-column label="图片">
        <template #="{ row, index }">
          <img :src="row.imgUrl" alt="" style="width: 100px; height: 100px" />
        </template>
      </el-table-column>
    </el-table>
  </el-dialog>
</template>

<script setup lang="ts">
import { nextTick, onBeforeUnmount, reactive, ref, watch } from 'vue'
import Category from '../../../components/Category/index.vue'
import useAttrStore from '@/store/modules/attr'
import { reqDeleteSpu, reqFindSkuInfo, reqSpuData } from '@/api/product/spu'
import { ElMessage } from 'element-plus'
import {
  IResponseSpuData,
  ISkuDataResponse,
  ISkuParam,
} from '@/api/product/spu/type'
import spuForm from './spuForm.vue'
import { Scence } from '@/views/product/attr/type'
import SkuForm from './skuForm.vue'
let attrStore = useAttrStore()
let currentPage = ref<number>(1)
let pageSize = ref(3)
let data = ref<any>(null)
let total = ref(0)
let sence = ref(Scence.read)
let spuFormComponent = ref()
let skuComponent = ref()
let skuArr = ref<ISkuParam[]>([])
let isShow = ref<boolean>(false)
watch(
  () => attrStore.category3Value,
  async () => {
    if (attrStore.category3Value) {
      getSpuData()
    }
  },
)
const getSpuData = async () => {
  try {
    let result: IResponseSpuData = await reqSpuData(
      currentPage.value,
      pageSize.value,
      attrStore.category3Value,
    )
    if (result.code == 200) {
      data.value = result.data
      total.value = result.data.total
    } else {
      ElMessage('错误')
    }
  } catch (error) {
    console.log(error)
  }
}
const viewSku = async (data) => {
  try {
    let result: ISkuDataResponse = await reqFindSkuInfo(data.id)
    if (result.code == 200) {
      isShow.value = true
      skuArr.value = result.data
    }
  } catch (error) {
    console.log(error)
  }
}
const changeSence = (param: Scence, row?) => {
  sence.value = param

  nextTick(() => {
    console.log(spuFormComponent.value)
    console.log(row)

    spuFormComponent.value.init(row)
  })
}
const deleteSpu = (data) => {
  try {
    reqDeleteSpu(data.id).then((result) => {
      ElMessage({
        type: 'success',
        message: '删除成功',
      })
      getSpuData()
    })
  } catch (error) {
    console.log(error)
  }
}
const addSpu = () => {
  sence.value = Scence.writeSpu
  nextTick(() => {
    spuFormComponent.value.addSpu()
  })
}
const addSku = (row) => {
  sence.value = Scence.write
  nextTick(() => {
    skuComponent.value.init(
      attrStore.category1Value,
      attrStore.category2Value,
      row,
    )
  })
}
onBeforeUnmount(() => {
  attrStore.$reset()
})
</script>

<style lang="scss" scoped></style>
